<!--开启页面选项卡后，显示为选项卡标题-->
<div class="layui-card">
  <script type="text/html" template lay-done="layui.data.done(d.params)">
    <div class="layadmin-search">
      <form class="layui-form" method="post" lay-filter="form_notice_search">
        <div class="layui-inline">
          <div class="layui-form-label">关键字搜索</div>
          <div class="layui-input-inline">
            <input type="text" name="keyword" value=""
                   class="layui-input" placeholder="请输入关键字">
          </div>
        </div>
        <div class="layui-inline">
          <button id="btn_search_notice" class="layui-btn">
            <i class="layui-icon layui-icon-search"></i>搜索
          </button>
        </div>
      </form>
    </div>
    <div class="layui-card-body">
      <table id="table_notice" lay-filter="table_notice"></table>
    </div>
  </script>
  <script type="text/html" id="tpl_to_user">
    {{d.to_user.mobile}}
  </script>
  <script type="text/html" id="tpl_receiver_tool">
    <a class="layui-table-link" lay-event="notice_edit"><i class="layui-icon layui-icon-edit"></i>查看/编辑</a>
    <div class="ant-divider"></div>
    <a class="layui-table-link layui-font-red" lay-event="notice_del"><i
      class="layui-icon layui-icon-delete"></i>删除</a>
  </script>
</div>

<script>
  layui.data.done = function (obj) {
    layui.use(['table', 'form'], function () {
      let $ = layui.$
        , table = layui.table
        , admin = layui.admin
        , form = layui.form
        , view = layui.view

      let resourceUrl = 'agent-admin/notices'
        , defaultWhere = {template_id: obj.template_id}

      // 列表查询
      table.render({
        elem: '#table_notice'
        , url: resourceUrl
        , where: defaultWhere
        , page: true
        , cols: [[
          {title: '标题', field: 'title', minWidth: 100}
          , {title: '接收人', templet: '#tpl_to_user', width: 180, align: "center"}
          , {title: '发布时间', field: 'publish_time', width: 180}
          , {title: '操作', width: 200, align: 'left', fixed: 'right', toolbar: '#tpl_receiver_tool'}
        ]]
      });

      //监听操作栏
      table.on('tool(table_notice)', function (obj) {
        let data = obj.data;
        //删除
        if (obj.event === 'notice_del') {
          layer.confirm('确认删除该数据?', function (index) {
            admin.del(resourceUrl, data.id, function (res) {
              layer.close(index);
              table.reload('table_notice'); //重载表格
            })
          });
        }
        //编辑
        if (obj.event === 'notice_edit') {
          showNoticeForm(data);
        }
      });

      //添加
      $('#btn_search_notice').click(function () {
        let where = defaultWhere
        where.keyword = $('input[name="keyword"]').val()
        table.reload('table_notice', {where: where, page: {curr: 1}})
        return false;
      });


      function showNoticeForm(data) {
        data = data || {};
        let minWidth = '800px';
        let minHeight = '600px';
        data.is_message_edit = true;
        admin.popup({
          title: '查看/修改站内信内容'
          , area: [minWidth, minHeight]
          , id: 'popup_receiver_message'
          , success: function (layero, index) {
            view(this.id).render('message/receiver_message', data).done(function () {
              form.on('submit(submit_notice)', function (d) {
                let field = d.field;
                admin.post(resourceUrl, field, function (res) {
                  layer.close(index);
                  table.reload('table_notice');
                })
              })
            })
          }
        })
      }
    })
  }
</script>

